{% extends "base.html" %}
{% block page_title %}Add Project - Step {{ wizard.steps.step1 }}{% endblock %}

{% load i18n %}
{% load static %}
{% load render_bundle from webpack_loader %}

{% block head %}
{{ wizard.form.media }}
{{ form.media.css }}
{% endblock %}

{% block content %}
<div class="error-messages">{{ wizard.non_form_errors }}</div>
<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <div class="card">
      <div class="cardface">
        <form action="." method="post" enctype="multipart/form-data">
          {% csrf_token %}
          {{ wizard.management_form }}
          <h1>Codebook Upload Instructions</h1>
          <h3>Description</h3>
          <p>This page gives you the opportunity to upload extra information for coders (ex: tips or hints differentiating different labels, examples of labeled data, etc.). To upload, the file <strong>must pass the following checks:</strong></p>
          <ul class="list-group">
            <li class="list-group-item">The file must be a pdf</li>
          </ul>
          <div class="form-group">
            <label class="control-label" for="{{ wizard.form.data.id_for_label }}">{{ wizard.form.data.label }}</label>
            <input class="form-control" id="{{ wizard.form.data.id_for_label }}" maxlength="30" name="{{ wizard.form.data.html_name }}" type="file" placeholder="{{ form.data.label }}" />
            <div class="error-messages">{{ wizard.form.data.errors }}</div>
          </div>
          <div class="wizard_nav_bar">
            <button class="btn btn-info" name="wizard_goto_step" type="submit" value="project">1. Info</button>
            <button class="btn btn-info" name="wizard_goto_step" type="submit" value="labels">2. Labels</button>
            <button class="btn btn-info" name="wizard_goto_step" type="submit" value="permissions">3. Permissions</button>
            <button class="btn btn-info" name="wizard_goto_step" type="submit" value="advanced">4. Advanced</button>
            <input class="btn btn-primary" type="submit" value="Next Step"/>
            <p class="pull-right">Step {{ wizard.steps.step1 }} of {{ wizard.steps.count }}</p>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}
